<template>
  <table  border="1" cellspacing="1">
    <caption>
      <h3>欢迎光临_vue开发的收银系统_水果店</h3>
    </caption>
    <thead>
      <tr>
        <th>苹果 10 ￥ / 斤，折扣 &lt; 8折 &gt;</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>请输入你要购买的斤数 <input type="text" v-model="count"></td>
      </tr>
      <tr>
        <td><button @click="sumFn">结账买单~</button></td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>结账单: 总价: {{beforeSum}} ￥元 折后价: {{afterSum}} ￥元 省了: {{cutSum}} ￥元</td>
      </tr>
    </tfoot>
  </table>
</template>
<script>
export default {
  name: "CodeApp",
  data() {
    return {
      count:0,
      beforeSum:0,
      afterSum:0,
      cutSum:0
    };
  },

  mounted() {},

  methods: {
    sumFn(){
      this.beforeSum=10*this.count
      this.afterSum=10*0.8*this.count
      this.cutSum=this.beforeSum-this.afterSum
    }
  },
};
</script>

<style>
table{
  text-align: center;
}
</style>